<!--
 * @Author: 禹培根
 * @Date: 2020-12-24 16:34:26
 * @LastEditTime: 2021-12-13 10:50:22
 * @LastEditors: Please set LastEditors
 * @Description: 
-->
<template>
 <div class="index">
   <div class="feed-boxs">
     <ul>
        <li>
            <div><img src="../image/2021100801.png" alt=""></div>
            <span>我的抬头</span><span class="span2">{{username}}</span>
         </li>
         <li>
           
             <div><img src="../image/2021100802.png" alt=""></div>
             <van-field placeholder="选择日期" v-model="time" name="time"  @click="show = true" />
            <!-- <span>{{time}}</span> -->
            <van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" type="range" @confirm="onConfirm" />
           
            
         </li>
     </ul>
   </div>
  <div class="feed-box">
    <van-tabs type="card">
      <van-tab title="待开流水">
        <div class="van-hairline--top"></div>
         <ul>
           <van-radio-group v-model="result">
          <!-- <van-checkbox-group v-model="result"> -->
             <van-list 
                class="repayment-list"
                v-model="loading1"
                :finished="finished1"
                finished-text="没有更多了"
                :immediate-check="false"
                @load="onLoad1"
            >
          <li v-for="(item,idx) in insurancePolicyList1" :key="idx" >
            <div class="box-one">
               <van-radio :name="item" >{{item.contno}}</van-radio>
              <!-- <van-checkbox :name="item" shape="square" >{{item.contno}} </van-checkbox> -->
              <p class="fontp">{{item.productname}}</p>
              <p class="fontp">{{item.username}}</p>
              <div class="box-span"><span >{{item.paydate}}</span></div>
              <div class="box-twosp" >
                <p style="color: black;" class="fontp">实缴</p>
                <p class="box-one-t" style="color:rgb(25,137,250);text-align: center;margin-top:35px">{{item.paymoney}}</p>
              </div>
              
            </div>
             <div class="van-hairline--top" style="height:20px;margin-top:10px"></div>
          </li>
         </van-list>  
         </van-radio-group>
         
        </ul>
         <div class="butdiv" style="">
              <van-button  block type="info" @click="Invoicing"  native-type="submit">开具发票</van-button>
          </div>
        
      </van-tab>
      <van-tab title="发票夹">
        <van-list 
                class="repayment-list"
                v-model="loading2"
                :finished="finished2"
                finished-text="没有更多了"
                :immediate-check="false"
                @load="onLoad2"
            >
        <ul class="uul" v-for="(item,idx) in invoiceList1" :key="idx" @click="tomyinvoice(item)">
                        <li>
                            <span class="lititle">保单号: </span>
                            <span class="inner"> {{item.contno}}</span>
                        </li>
                        <li>
                            <span class="lititle">购方名称: </span>
                            <span class="inner">{{username}} </span>
                        </li>
                        <li>
                            <span class="lititle">发票金额: </span>
                            <span class="inner"> {{item.invoicemoney}}</span>
                        </li>
                        <li>
                            <span class="lititle">开票日期: </span>
                            <span class="inner"> {{item.invoicedate}}</span>
                        </li>
                       
                    </ul>
           </van-list>  
      </van-tab>
    </van-tabs>
  </div>
 </div>
</template>

<script >
// @ is an alias to /src
import { formatArrToFormData } from "@/utils";
import $store from "@/store/index";
import $router from "@/router/index";
import $api from "@/api/index";
import { Toast } from 'vant';
import Cookie from "js-cookie";
import Vue from 'vue';
import { Dialog } from 'vant';
import axios from "axios";
import { Lazyload } from 'vant';

import {sm4} from "../../api/modules/SM4Encode.js"

Vue.use(Lazyload);
// 全局注册
Vue.use(Dialog);
export default {
  name: "home",
  data() {
    return {
      result:[],
     username:'',
     time:'',
     show:false,
     checked:true,
    //  disabled:false,
     startdate:'',
     enddate:'',
     showss:true,
     minDate:new Date(1949, 10, 1),
     maxDate: new Date(2049, 0, 31),
      pageSize1:'10',//页大小
      pageNum1:'1',//页码
      pages1:'',//总条数
      loading1: false,
      finished1: false,
      pageSize2:'10',//页大小
      pageNum2:'1',//页码
      pages2:'',//总条数
      // idno:'430203196909013071',//五要素证件号码
       idno:'',
      // idtype:'0',//五要素证件类型
      idtype:'',
      // sex:'0',//五要素性别
      sex:'',
      // name:'解钉普',//五要素姓名
      name:'',
      // birthday:'1969-09-01',//五要素出生日期
      birthday:'',
      loading2: false,
      finished2: false,
      token:'',
     invoiceList:[],
     invoiceList1:[],
     insurancePolicyList:[],
     insurancePolicyList1:[],
     businesstype:'',
     businessno:'',
    //  insurancePolicyList1:[{"contno":"123456789090","productname":"萨瓦迪卡萨瓦迪卡","username":"王桑","paydate":"2021-12-23","paymoney":"25"},{"contno":"123456789090","productname":"萨瓦迪卡萨瓦迪卡","username":"王桑","paydate":"2021-12-23","paymoney":"25.56"},{"contno":"123456789090","productname":"萨瓦迪卡萨瓦迪卡","username":"王桑","paydate":"2021-12-23","paymoney":"2556.23"},]
    };
  },
  created(){
    //五要素
    this.idno = Cookie.get("idno");
    this.name = Cookie.get("name")
    // let setcookie = Cookie.get("Set-Cookie")
    // this.name = Cookie.get("name");
    // this.username = this.name;
    this.idtype = Cookie.get("idtype");
    this.birthday = Cookie.get("birthday");
    this.sex = Cookie.get("sex");
    // this.tokenid =  Cookie.get("token");
    // window.localStorage.setItem("token",this.toke);
    // console.log("setcookie:"+setcookie)
    // console.log("idno:"+this.idno)
    // console.log("token:"+this.token)
    // console.log("name:"+this.name)
    // console.log("idtype:"+this.idtype)
    // console.log("birthday:"+this.birthday)
    // console.log("sex:"+this.sex)
    this.getToken()
    
  },
   mounted(){
    
  },
  methods: {
     getToken(){
       
      },
    getinfo(){
      // var name =  this.getCookie('name');
 
    },
    
    tomyinvoice(item){
       },
     formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
   onConfirm(date) {
    
    },
    onClick(name, title) {
      // Toast(title);
    },
    Invoicing(){
      
        
    },
    onLoad1(){

    },
    onLoad2(){
    
    },
    init(params){
    
   
    },
    inits(paramss){

    },
  },
};
</script>
<style lang="scss" scoped>
.index{
  padding: 20px;

}
::v-deep van-radio__label{
  font-size: 30px !important;
}
.fontp{
  font-size: 30px;
}
.van-hairline--top{
height:40px;
margin-top:40px
}
.box-one{
margin-left:20px;
position:relative;
}
.box-one-t{
  font-size: 30px;
 color:rgb(25,137,250)
}
.box-twosp{
   position: absolute;
   left:420px;
   color: black;
   top:-10px;
  //  text-align: center;
}
.uul{ //选项卡里面的标题和内容的样式
margin-top: 20px;
border-radius: 20px;
box-sizing: border-box;
padding: 20px;
      box-shadow: 0px 0px 20px #e2dfdf;
            li{
            font-size: 30px;
            color: #646566;
            margin: 20px 0;
            .lititle{
                display:inline-block;
                width:250px;
                font-size: 30px;
                margin-left: 50px;
            }
            .inner{
                font-size: 30px;
                // font-weight: 600;
                display: inline-block;
                // margin-left: 20px;
                float: right;
                margin-right: 50px;
                color: #333;
            }
            }
        }
.butdiv{
position:fixed; 
width:90%; 
bottom:10px;
left: 0; 
z-index: 10; 
text-align: center;
margin-left:5%
}
.feed-boxs{
    width: 100%;
    padding: 20px;
    
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px #e2dfdf;
    margin-bottom: 20px;
    background: white;
}
.feed-box{
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px #e2dfdf;
    margin-bottom: 40px;
    // height: 980px;
    background: white;
    p{
      margin: 0;
      margin-top: 20px;
      margin-left: 55px;
      // color: rgb(184,184,184);
    }
    .box-span{
      margin: 0;
      margin-top: 20px;
      margin-left: 55px;
      // color: rgb(184,184,184);
    }
}
.feed-boxs ul{
    margin: 0 30px;
    padding-bottom: 10px;
}
.feed-boxs ul li {
    font-size: 30px;
    border-bottom: #e0e0eb 1px solid;
    display: flex;
    margin-top: 20px;
}
.feed-boxs ul li img{
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin-right: 20px;
   
}
.feed-boxs ul li span{
    padding-bottom: 20px;
    line-height:40px;
    color:#7a7c7d;
    // 
    margin-top:8px;
}
.span2{
  font-size: 30px;
  font-weight: 600;
  margin-left: 200px;
  color: black;
}
</style>
